import React, { Component } from 'react'

export default class Count extends Component {
  // constructor() {
  //   super()
  //   this.state = { c: 0, msg: 'hello state' }
  //   // this.handle = () => {
  //   //   this.setState({
  //   //     c: this.state.c + 1,
  //   //   })
  //   // }
  // }
  state = { c: 0, msg: 'hello state' }
  // 这种写法就是构造器中this.handle = () => {} 的简写
  handle = () => {
    this.setState({
      c: this.state.c + 1,
    })
  }
  // 这种写法是将handle添加到了原型上
  // handle() {
  //   this.setState({
  //     c: this.state.c + 1,
  //   })
  // }

  render() {
    // render函数中可以访问this.并且this也一定是组件的实例
    return (
      <div>
        {this.state.msg}
        <div>-</div>
        <p className="test">{this.state.c}</p>
        <div onClick={this.handle}>+</div>
      </div>
    )
  }
}
